<template>
 
    <div class="container">
      <ul class="recommend">
        <li class="clock">
          <div class="time">
            <img src="./images/clock.png" />
            <h3>今日推荐</h3>
          </div>
        </li>
        <li class="banner">
          <img src="./images/today01.png" />
        </li>
        <li class="banner">
          <img src="./images/today02.png" />
        </li>
        <li class="banner">
          <img src="./images/today03.png" />
        </li>
        <li class="banner">
          <img src="./images/today04.png" />
        </li>
      </ul>
    </div>
 
</template>
<script>
export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: "recommend",

  data() {
    return {};
  },

  mounted() {},

  methods: {},
};
</script>

<style lang="scss" scoped>
.recommend {
  height: 165px;
  background-color: #eaeaea;
  margin: 10px 0;
  display: flex;
  .clock {
    width: 16.67%;
    background-color: #5c5251;
    color: #fff;
    font-size: 18px;
    text-align: center;
    .time {
      padding: 30px 0;
      h3 {
        margin: 9px 0;
        font-weight: 700;
        font-size: 18px;
        line-height: 30.06px;
      }
    }
  }

  .banner {
    width: 20.83%;

    img {
      width: 100%;
      height: 100%;
      transition: all 400ms;
      opacity: 1;
      &:hover {
        opacity: 0.8;
      }
    }
  }
}
</style>
